<template>
    <c-dialog v-model:show="dialogFlag" v-if="dialogFlag" :title="title" @confirm="addUser" @close="close"
        :btnDisabled="type == 3" width="500px">
        <br/>
        <el-form ref="userForm" :model="formData" label-width="100px">
            <el-form-item label="志愿者姓名">
                <el-input v-model="editData.volunteerMemberName" :disabled="true" />
            </el-form-item>
            <el-form-item label="志愿者电话">
                <el-input v-model="editData.volunteerMemberPhone" :disabled="true" />
            </el-form-item>
            <el-form-item label="服务时间">
                <el-input v-model="editData.serviceTime" :disabled="true" />
            </el-form-item>
            <el-form-item label="现场图片">
                <div class="imgListBox">
                    <a v-for="(dt,index) in imgList" target="_blank" :key="index" :href="dt" class="item" :style="`background-image: url(${dt})`"></a>
                </div>
            </el-form-item>
            <el-form-item label="审核结果" class="state">
                <el-radio-group v-model="formData.state" style="width: 100%;" :disabled="type == 3" @change="setTxt">
                    <el-radio :label="1">通过</el-radio>
                    <el-radio :label="2">拒绝</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="描述" prop="remark">
                <el-input v-model="formData.remark" :rows="2" type="textarea" :disabled="type == 3" />
            </el-form-item>
        </el-form>
    </c-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import cDialog from '@/components/custom/cDialog.vue'
import { message } from '@/utils/element'
import {verifyServiceAidOrder} from '@/api/service'

import category from "@/components/custom/category.vue"
import {copyObject} from "@/utils/common"

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: String,
    editData: Object,
    type: Number // 操作类型：1为新增，2为编辑，3为查看
})
const emit = defineEmits(['update:show', 'success'])
const formData = ref({
    state:1,
    remark:'审核通过'
})
const showEditor = ref(false)
const imgList = ref([])
onMounted(() => {
    formData.value.id = props.editData.id
    imgList.value = props.editData.verifyImage ? props.editData.verifyImage.split(";"):[]
})



const userForm = ref(null)

const dialogFlag = ref(props.show)

const addUser = async () => {

    const res = await verifyServiceAidOrder(formData.value)

    if(res.code == 0){
        message('数据提交成功',2)
        emit('success')
        close()
    }
 
}

const close = () => {
    emit('update:show', false)
}
const setTxt = ()=>{
    if(formData.value.state==2){
        formData.value.remark = '审核拒绝'
    }else{
        formData.value.remark = '审核通过'
    }
}
</script>
<style lang="scss" scoped>
.mytips {
    font-size: 12px;
    color: #999;
}

.myitembox {
    display: flex;
    width: 100%;

    .myipitem {
        flex: 1;
    }

    .icontips {
        display: flex;
        padding: 0 0 0 4px;
        align-items: center;
    }
}
.imgListBox{
    .item{
        float: left;
        position: relative;
        z-index: 100;
        width: 50px;
        height: 50px;
        background-size: cover;
        background-position: left top;
        background-repeat: no-repeat;
        margin: 5px 0;
        &+.item{
            margin-left: 10px;
        }
    }
    &::after{
        clear: both;
    }
}
</style>
<style lang="scss">
.userFormItem {
    &.el-form-item--default {
        margin-bottom: 0;
    }
}
</style>